<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>传输队列</title>
  <link rel="stylesheet" href="../styles/background.css">
  <link rel="stylesheet" href="../styles/titlebar.css">
  <link rel="stylesheet" href="../styles/navbar.css">
  <link rel="stylesheet" href="../styles/queue.css">
</head>
<body>
  <!-- 自定义标题栏 -->
  <div class="custom-titlebar">
    <div class="titlebar-left">
      <div class="titlebar-avatar" id="titlebarAvatar">
        <img id="titlebarAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
      <div class="titlebar-title" id="titlebarTitle">传输队列</div>
    </div>
    <div class="titlebar-right">
      <div class="titlebar-controls">
        <button class="titlebar-btn cloud-sync" id="titlebarCloudSync" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button class="titlebar-btn minimize" id="titlebarMinimize" title="最小化">
          <span>─</span>
        </button>
        <button class="titlebar-btn maximize" id="titlebarMaximize" title="最大化">
          <span>□</span>
        </button>
        <button class="titlebar-btn close" id="titlebarClose" title="关闭">
          <span>✕</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 侧边导航栏 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="user-avatar">
        <img id="userAvatarImg" src="../assets/avatar.png" alt="用户头像">
      </div>
    </div>
    
    <div class="sidebar-nav">
      <div class="nav-item" data-view="message">
        <div class="nav-icon">
          <img src="../assets/cd01.svg" alt="消息">
        </div>
        <div class="nav-text">消息</div>
      </div>
      <div class="nav-item" data-view="workbench">
        <div class="nav-icon">
          <img src="../assets/cd06.svg" alt="工作台">
        </div>
        <div class="nav-text">工作台</div>
      </div>
      <div class="nav-item" data-view="calendar">
        <div class="nav-icon">
          <img src="../assets/cd02.svg" alt="日历">
        </div>
        <div class="nav-text">日历</div>
      </div>
      <div class="nav-item" data-view="files">
        <div class="nav-icon">
          <img src="../assets/cd05.svg" alt="文件">
        </div>
        <div class="nav-text">文件</div>
      </div>
      <div class="nav-item active" data-view="queue">
        <div class="nav-icon">
          <img src="../assets/cd03.svg" alt="传输队列">
        </div>
        <div class="nav-text">队列</div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="nav-item" id="sidebarSettingsBtn">
        <div class="nav-icon">
          <img src="../assets/442P.png" alt="设置">
          <div class="server-status-indicator connecting" id="serverStatusIndicator"></div>
        </div>
        <div class="nav-text">设置</div>
      </div>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="main-container">
    <!-- 队列头部 -->
    <div class="queue-header">
      <div class="queue-tabs">
        <div class="queue-tab active" data-tab="uploading">
          <span>上传中(0)</span>
        </div>
        <div class="queue-tab" data-tab="completed">
          <span>已完成(0)</span>
        </div>
      </div>
      <div class="queue-actions">
        <button class="action-btn" id="pauseAllBtn">
          <span>全部暂停</span>
        </button>
        <button class="action-btn" id="cancelAllBtn">
          <span>全部取消</span>
        </button>
      </div>
    </div>

    <!-- 文件列表标题 -->
    <div class="files-section-header">
      <span class="section-title"></span>
      <div class="section-actions">
        <span class="section-action">名称</span>
        <span class="section-action">状态</span>
        <span class="section-action">操作</span>
      </div>
    </div>

    <!-- 队列内容 -->
    <div class="queue-content" id="queueContent">
      <!-- 空状态 -->
      <div class="empty-state" id="emptyState">
        <div class="empty-icon">
          <svg viewBox="0 0 1024 1024" width="120" height="120">
            <path d="M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 64C299.968 128 128 299.968 128 512s171.968 384 384 384 384-171.968 384-384S724.032 128 512 128z m32 192v256h128l-160 192-160-192h128V320h64z" fill="#4A90E2"></path>
          </svg>
        </div>
        <div class="empty-text">暂无正在上传的文件</div>
      </div>

      <!-- 传输列表 -->
      <div class="transfer-list" id="transferList" style="display: none;">
        <!-- 传输项将动态添加到这里 -->
      </div>
    </div>
  </div>

  <script src="../scripts/titlebar.js"></script>
  <script src="../scripts/navbar.js"></script>
  <script src="../scripts/queue.js"></script>
</body>
</html>
